<template>
    <div id="main-node">
        <div id="upload-data-border" class="box-style">
            <div id="upload-data">
                <a href="" id="open-file">上传文件
                    <input type="file" accept=".xlsx, .xls, .csv" ref="file_upload" @change="file_type">
                </a>
            </div>
            <div id="form-info">
                <div id="gene-meth">
                    <p class="box-title">常用分析</p>
                    <div id="desc-btm" class="radio-btm">
                        <input type="radio" id="descriptive" name="meth" value="descriptive">
                        <label for="descriptive">描述性统计分析</label>
                    </div>
                </div>
                <div id="data-visual">
                    <p class="box-title">数据可视化</p>
                    <div id="bar-btm" class="radio-btm">
                        <input type="radio" id="bar-radio" name="meth" value="bar">
                        <label for="bar-radio">条形图</label>
                    </div>
                    <div id="line-btm" class="radio-btm">
                        <input type="radio" id="line-radio" name="meth" value="line">
                        <label for="line-radio">折线图</label>
                    </div>
                    <div id="scat-btm" class="radio-btm">
                        <input type="radio" id="scat-radio" name="meth" value="scat">
                        <label for="scat-radio">散点图</label>
                    </div>
                    <div id="pie-btm" class="radio-btm">
                        <input type="radio" id="pie-radio" name="meth" value="pie">
                        <label for="pie-radio">环状图</label>
                    </div>
                    <div id="map-btm" class="radio-btm">
                        <input type="radio" id="map-radio" name="meth" value="map">
                        <label for="map-radio">中国地图</label>
                    </div>
                </div>
                <button id="submit">提交</button>
            </div>
        </div>
        <div id="all-charts" class="box-style">
            <div id="bar-chart" ref="zhejiang_GDP_data" class="chart-style"></div>
            <div id="map-chart" ref="map_GDP_data" class="chart-style"></div>
            <div id="line-chart" ref="quarterly_GDP_data" class="chart-style"></div>
            <div id="scatter-chart" ref="popu_GDP_data" class="chart-style"></div>
            <div id="pie-chart" ref="indu_data" class="chart-style"></div>
        </div>
    </div>
</template>

<script>
import * as echarts from "echarts";
import china_map from "@/assets/China_Map.json";
import zhejiang_city_data from "@/assets/data/zhejiang_city_GDP.json";
import quar_data from "@/assets/data/quarterly_GDP_data.json";
import prov_data from "@/assets/data/map_GDP.json";
import popu_gdp_data from "@/assets/data/popu_GDP_data.json";
import indus_data from "@/assets/data/industry_data.json";


export default {
    name: 'AllCharts',

    data() {
        return {
            
        };
    },

    mounted() {
        this.bar_chart();
        this.line_chart();
        this.map_chart();
        this.scat_chart();
        this.pie_chart();
    },

    methods: {
        file_type: function() {
            const upload_file = this.$refs.file_upload;
            const file_type = upload_file.files[0].type;
            const file_size = upload_file.files[0].size / 1024;
            let type_list = ["text/csv"
            , "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
            , "application/vnd.ms-excel"];
            for (let ft = 0; ft <= type_list.length; ft++)
            {
                if(file_type != type_list[ft] && ft == type_list.length) {
                    alert("文件类型错误,请重新上传");
                    break;
                }
                else if(file_type == type_list[ft]) {
                    break;
                }
            }
            if (file_size > 500) {
                alert("文件大于500k,请重新上传");
            }
        },
        bar_chart: function() {
            let city_data = zhejiang_city_data;
            let zhejiang_data_bar = echarts.init(this.$refs.zhejiang_GDP_data);
            zhejiang_data_bar.setOption({
                title: {
                    text: city_data.title,
                    left: 'center',
                    top: '10',
                    textStyle: {
                        color: "rgb(255, 255, 255)",
                    },
                },
                tooltip: {
                    trigger: "item",
                },
                legend: {
                    type: 'scroll',
                },
                xAxis: {
                    data: city_data.xAxis,
                    axisLine: {
                        lineStyle: {
                            color: "rgb(255, 255, 255)",
                        },
                    },
                },
                yAxis: {
                    axisLine: {
                        lineStyle: {
                            color: "rgb(255, 255, 255)",
                        },
                    },
                },
                series: {
                    name: "",
                    type: 'bar',
                    data: [
                        {
                            value: city_data.data[0],
                            itemStyle: {
                                color: city_data.color[0]
                            },
                        },
                        {
                            value: city_data.data[1],
                            itemStyle: {
                                color: city_data.color[1]
                            },
                        },
                        {
                            value: city_data.data[2],
                            itemStyle: {
                                color: city_data.color[2]
                            },
                        },
                        {
                            value: city_data.data[3],
                            itemStyle: {
                                color: city_data.color[3]
                            },
                        },
                        {
                            value: city_data.data[4],
                            itemStyle: {
                                color: city_data.color[4]
                            },
                        },
                    ],
                    },
            });
        }, 
        line_chart: function() {
            let quar_data_line = echarts.init(this.$refs.quarterly_GDP_data);
            quar_data_line.setOption({
                title: {
                    text: quar_data.title,
                    left: 'center',
                    top: '10',
                    textStyle: {
                        color: "rgba(252,252,252,1)",
                    },
                },
                grid: {
                    left: "20%",
                },
                tooltip: {
                    trigger: "axis",
                },
                legend: {
                    type: 'scroll',
                    
                },
                xAxis: {
                    data: quar_data.xAxis,
                    axisLine: {
                        lineStyle: {
                            color: "rgb(255, 255, 255)",
                        },
                    },
                },
                yAxis: {
                    axisLine: {
                        lineStyle: {
                            color: "rgb(255, 255, 255)",
                        },
                    },
                },
                series: {
                    name: "",
                    type: 'line',
                    data: [
                        {
                            value: quar_data.data[0],
                            itemStyle: {
                                color: quar_data.color[0],
                            },
                        },
                        {
                            value: quar_data.data[1],
                            itemStyle: {
                                color: quar_data.color[1],
                            },
                        },
                        {
                            value: quar_data.data[2],
                            itemStyle: {
                                color: quar_data.color[2],
                            },
                        },
                        {
                            value: quar_data.data[3],
                            itemStyle: {
                                color: quar_data.color[3],
                            },
                        },
                    ],
                    itemStyle: {
                        normal: {
                            lineStyle: {
                                color: "#a0a7e6",
                            }
                        }
                    },
                },
            });
        },
        map_chart:function() {
            let map_data = echarts.init(this.$refs.map_GDP_data);
            echarts.registerMap("china_map", china_map);
            let map_option = {
                title: {
                    text: prov_data.title,
                    left: 'center',
                    top: '10',
                    textStyle: {
                        color: "rgb(255, 255, 255)",
                    },
                },
                tooltip: {
                    trigger: 'item',
                    showDelay: 0,
                    transitionDuration: 0.2
                    },
                visualMap: {
                    left: 'right',
                    min: 2000,
                    max: 150000,
                    inRange: {
                        color: [
                        '#313695',
                        '#4575b4',
                        '#74add1',
                        '#abd9e9',
                        '#e0f3f8',
                        '#ffffbf',
                        '#fee090',
                        '#fdae61',
                        '#f46d43',
                        '#d73027',
                        '#a50026'
                        ]
                    },
                    text: ['High', 'Low'],
                    textStyle:{
                        color: "rgb(255, 255, 255)",
                    },
                    calculable: true
                    },
                series: [{
                        type: 'map',
                        roam: true,
                        map: 'china_map',
                        data: prov_data.data,
                    }
                ],
            };
            map_data.setOption(map_option);
        },
        scat_chart: function() {
            let popu_gdp_scat = echarts.init(this.$refs.popu_GDP_data);
            popu_gdp_scat.setOption({
                title: {
                    text: popu_gdp_data.title,
                    left: "center",
                    top: "10",
                    textStyle: {
                        color: "rgb(255, 255, 255)",
                    },
                },
                grid: {
                    left: "20%",
                },
                xAxis: {
                    name: "年末总人口(万人)",
                    nameLocation: "center",
                    nameTextStyle: {
                        lineHeight: 40,
                    },
                    axisLine: {
                        lineStyle: {
                            color: "rgb(255, 255, 255)",
                        },
                    },
                },
                yAxis: {
                    name: "国民总收入(亿元)",
                    nameLocation: "center",
                    nameTextStyle: {
                        lineHeight: 100,
                    },
                    axisLine: {
                        lineStyle: {
                            color: "rgb(255, 255, 255)",
                        },
                    },
                },
                series: {
                    name: "",
                    type: "scatter",
                    symbolSize: 5,
                    data: popu_gdp_data.data,
                    color: {
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0,
                                color: "RGB(83,205,255)",
                            },
                            {
                                offset: 0.8,
                                color: "RGB(255,255,0)",
                            },
                            {
                                offset: 1,
                                color: "RGB(252,59,68)"
                            }
                        ],
                    },
                },
            })
        },
        pie_chart: function() {
            let indu_pie = echarts.init(this.$refs.indu_data);
            indu_pie.setOption({
                title: {
                    text: indus_data.title,
                    left: 'center',
                    top: '10',
                    textStyle: {
                        color: "rgb(255, 255, 255)",
                    },
                },
                tooltip: {
                    trigger: "item",
                },
                legend: {
                    type: 'scroll',
                    top: '15%',
                    left: 'center',
                    textStyle: {
                        color: "rgb(255, 255, 255)",
                    },
                },
                
                series: {
                    name: "",
                    type: "pie",
                    radius: ['40%', '70%'],
                    top: 50,
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderRadius: 10,
                    },
                    label: {
                        show: false,
                        fontWeight: "500",
                        color: "rgb(255, 255, 255)",
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                        show: true,
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: indus_data.data,
                },
            });
        }
    },
};
</script>

<style scoped>
#main-node {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}


.box-style {
    background-color: rgb(28, 28, 30);
    border-radius: 15px;
    box-shadow: 0px 3px 5px rgb(2, 2, 2);
}


.chart-style {
    display: inline-block;
    position: relative;
    background-color: rgb(50, 50, 50);
    border-radius: 15px;
    box-shadow: 0px 3px 5px rgb(2, 2, 2);
    margin: 10px;
}


.box-title {
    display: block;
    position: relative;
    text-align: center;
    margin: 0px;
    color: rgb(255, 255, 255);
    font: 600 20px PingFangSC-Semibold;
    padding: 0px 0px 5px 0px;
    border-bottom: 2px solid rgb(255, 255, 255);
}


.radio-btm {
    text-align: center;
    padding: 0px;
    border-radius: 10px;
}


.radio-btm:hover {
    text-align: center;
    padding: 0px;
    border-radius: 10px;
    box-shadow: 0px 0px 5px rgb(0, 0, 0);
}


label {
    display: inline-block;
    color: rgb(255, 255, 255);
    font: 200 15px PingFangSC-Semibold;
    margin: 5px;
}


input[type="radio"] {
    display: inline-block;
    accent-color: rgb(0, 0, 0);
    margin: 5px;
}


#upload-data-border {
    position: absolute;
    display: inline-block;
    top: 70px;
    left: 10px;
    width: 450px;
    height: 850px;
}


#upload-data {
    position: relative;
    top: 3px;
    left: 3px;
    width: 440px;
    height: 340px;
    border: 2px dashed rgb(255, 255, 255);
    background-color: rgb(50, 50, 50);
    border-radius: 15px;
}


#open-file {
    position: relative;
    top: 140px;
    left: 180px;
    width: 80px;
    height: 20px;
    font: 600 20px PingFangSC-Semibold;
    line-height: 20px;
    color: #ffffff;
    text-decoration: underline;
}


#open-file > input[type="file"] {
    width: 100%;
    height: 100%;
    position: absolute;
    color: transparent;
    right: 0;
    top: 0;
    font-size: 0;
    opacity: 0;
    cursor: pointer;
}


#form-info {
    position: relative;
    width: 440px;
    height: 490px;
    margin: 10px 5px;
    border-radius: 15px;
    box-shadow: 0px 0px 3px rgb(2, 2, 2);
    background-color: rgb(50, 50, 50);
}


#gene-meth {
    width: 440px;
    height: 150px;
}


#gene-meth > p{
    top: 10px;
    left: 170px;
    width: 100px;
    height: 30px;
}


#desc-btm {
    display: inline-block;
    position: relative;
    top: 30px;
    left: 10px;
    width: 150px;
    height: 45px;
}


label[for="descriptive"] {
    line-height: 37px;
}


#data-visual {
    position: relative;
    width: 440px;
    height: 150px;
}


#data-visual > p {
    left: 170px;
    width: 100px;
    height: 30px;
}


#bar-btm {
    display: inline-block;
    position: relative;
    top: 30px;
    left: 30px;
    width: 100px;
    height: 40px;
}


label[for="bar-radio"] {
    line-height: 30px;
}


#line-btm {
    display: inline-block;
    position: relative;
    top: 30px;
    left: 40px;
    width: 100px;
    height: 40px;
}


label[for="line-radio"] {
    line-height: 30px;
}


#scat-btm {
    display: inline-block;
    position: relative;
    top: 30px;
    left: 50px;
    width: 100px;
    height: 40px;
}


label[for="scat-radio"] {
    line-height: 30px;
}


#pie-btm {
    display: inline-block;
    position: relative;
    top: 70px;
    left: -270px;
    width: 100px;
    height: 40px;
}


label[for="pie-radio"] {
    line-height: 30px;
}


#map-btm {
    display: inline-block;
    position: relative;
    top: 30px;
    left: 140px;
    width: 100px;
    height: 40px;
}


label[for="map-radio"] {
    line-height: 30px;
}


#submit {
    position: relative;
    top: 50px;
    left: 170px;
    width: 100px;
    height: 30px;
    border: 1px solid rgb(255, 255, 255);
    border-radius: 7px;
    background-color: rgb(50, 50, 50);
    font: 400 15px PingFangSC-Semibold;
    color: rgb(255, 255, 255);
}


#submit:hover {
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
}


#all-charts {
    position: absolute;
    top: 60px;
    left: 460px;
    margin: 10px;
    width: 1400px;
    height: 850px;
}


#bar-chart {
    top: -200px;
    width: 400px;
    height: 300px;
    background-color: rgb(50, 50, 50);
    margin: 10px;
}


#map-chart {
    width: 950px;
    height: 500px;
    background-color: rgb(50, 50, 50);
    margin: 10px;
}


#line-chart {
    top: -200px;
    width: 400px;
    height: 300px;
}


#scatter-chart {
    width: 450px;
    height: 300px;
}


#pie-chart {
    width: 450px;
    height: 300px;
}



</style>